<extend name="Layout:base"/>

<block name="title">标题</block>
<block name="css">
    <link href="__PUBLIC__/css/style.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</block>
<block name="sy">active</block>
<block name="menu">
    <h5 class="breadcrumbs-title">首页</h5>
    <ol class="breadcrumbs">
        <li class="active">首页
        </li>
    </ol>
</block>

<block name="main">
    <div class="row center">
        <h2>蓝桥杯报名详情</h2>
    </div>

    <div class="row">
        <div class="col s12 m12 l8">
            <div class="card">
                <div class="card-move-up waves-effect waves-block waves-light">
                    <div class="move-up cyan darken-1">
                        <div>
                            <span class="chart-title white-text">各系报名分析</span>
                        </div>

                        <div class="trending-line-chart-wrapper">
                            <canvas id="trending-line-chart"></canvas>
                        </div>
                    </div>
                </div>
                <div class="card-content">
                    <div class="col s12 m3 l3">
                        <div id="doughnut-chart-wrapper">
                            <canvas id="doughnut-chart"></canvas>
                        </div>
                    </div>
                    <div class="col s12 m2 l2">
                        <ul class="doughnut-chart-legend">
                            <li class="mobile">女</li>
                            <li class="kitchen">男</li>
                        </ul>
                    </div>
                    <div class="col s12 m5 l6">
                        <div>
                            <h5>已报名人数：<span class="orange-text">0000/1000</span></h5>
                            <div class="progress">
                                <div class="determinate orange " style="width: 50%"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="col s12 m12 l4">
            <div class="card">
                <div class="card-move-up waves-effect waves-block waves-light">
                    <div class="move-up green darken-1">
                        <div>
                            <span class="chart-title white-text">三日报名分析</span>
                        </div>
                        <div class="trending-line-chart-wrapper">
                            <canvas id="days"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <div class="card">
                <div class="card-move-up waves-effect waves-block waves-light">
                    <div class="move-up blue darken-1">
                        <div>
                            <span class="chart-title white-text">本周报名分析</span>
                        </div>

                        <div class="trending-line-chart-wrapper">
                            <canvas id="myChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="row">

        <div class="col s12 m12 l12">
            <h5>报名学生信息</h5>
            <table class="bordered">
                <thead>
                <tr>
                    <th data-field="id">No</th>
                    <th data-field="name">姓名</th>
                    <th data-field="dept">系部</th>
                    <th data-field="class">班级</th>
                    <th data-field="sex">性别</th>
                    <th data-field="addtime">报名时间</th>
                </tr>
                </thead>

                <tbody>
                <tr>
                    <td>1</td>
                    <td>麦青强</td>
                    <td>信息系</td>
                    <td>14计算机1班</td>
                    <td>男</td>
                    <td>2016-04-14 22:41:40</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>麦青强</td>
                    <td>信息系</td>
                    <td>14计算机1班</td>
                    <td>男</td>
                    <td>2016-04-14 22:41:40</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>麦青强</td>
                    <td>信息系</td>
                    <td>14计算机1班</td>
                    <td>男</td>
                    <td>2016-04-14 22:41:40</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>


</block>

<block name="js">
    <!-- chartjs -->
    <script type="text/javascript" src="__PUBLIC__/js/chart.min.js"></script>
    <script>


        //各系报名分析
        window.onload = function () {
            var LineChartSampleData = {
                labels: ["信息系", "水利系", "电力系", "经管系", "汽车系", "建筑系", "自动化系", "机电系"],
                datasets: [{
                    label: "My First dataset",
                    fillColor: "rgba(128, 222, 234, 0.6)",
                    strokeColor: "#ffffff",
                    pointColor: "#00bcd4",
                    pointStrokeColor: "#ffffff",
                    pointHighlightFill: "#ffffff",
                    pointHighlightStroke: "#ffffff",
                    data: [65, 0, 666]
                }]
            };

            window.LineChartSample = new Chart(document.getElementById("trending-line-chart").getContext("2d")).Line(LineChartSampleData, {
                scaleGridLineColor: "rgba(255,255,255,0.4)",
                scaleFontSize: 12,
                scaleFontStyle: "normal",
                scaleFontColor: "#fff",
                tooltipFillColor: "rgba(255,255,255,0.8)",
                tooltipFontSize: 12,
                tooltipFontColor: "#000",
                tooltipTitleFontSize: 14,
                tooltipTitleFontStyle: "bold",
                tooltipTitleFontColor: "#000",
                responsive: true
            });


            //本周报名分析
            var data = {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [
                    {
                        fillColor: "rgba(220,220,220,0.5)",
                        strokeColor: "rgba(220,220,220,1)",
                        data: [65, 59, 90, 81, 56, 55, 40]
                    }
                ]
            }

            new Chart(document.getElementById("myChart").getContext("2d")).Bar(data, {
                scaleGridLineColor: "rgba(255,255,255,0.4)",
                scaleFontSize: 12,
                scaleFontStyle: "normal",
                scaleFontColor: "#fff",
                tooltipFillColor: "rgba(255,255,255,0.8)",
                tooltipFontSize: 12,
                tooltipFontColor: "#000",
                tooltipTitleFontSize: 14,
                tooltipTitleFontStyle: "bold",
                tooltipTitleFontColor: "#000",
                responsive: true
            });


            //三日报名分析
            var days = {
                labels: ["前天", "昨天", "今天"],
                datasets: [{
                    label: "My First dataset",
                    fillColor: "rgba(128, 222, 234, 0.6)",
                    strokeColor: "#ffffff",
                    pointColor: "#00bcd4",
                    pointStrokeColor: "#ffffff",
                    pointHighlightFill: "#ffffff",
                    pointHighlightStroke: "#ffffff",
                    data: [65, 666]
                }]
            };

            window.LineChartSample = new Chart(document.getElementById("days").getContext("2d")).Line(days, {
                scaleGridLineColor: "rgba(255,255,255,0.4)",
                scaleFontSize: 12,
                scaleFontStyle: "normal",
                scaleFontColor: "#fff",
                tooltipFillColor: "rgba(255,255,255,0.8)",
                tooltipFontSize: 12,
                tooltipFontColor: "#000",
                tooltipTitleFontSize: 14,
                tooltipTitleFontStyle: "bold",
                tooltipTitleFontColor: "#000",
                responsive: true
            });

            //男女分析
            var PieDoughnutChartSampleData = [
                {
                    value: 300,
                    color: "#F7464A",
                    highlight: "#FF5A5E",
                    label: "女"
                },
                {
                    value: 50,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "男"
                }
            ]

            window.PieChartSample = new Chart(document.getElementById("doughnut-chart").getContext("2d")).Pie(PieDoughnutChartSampleData, {
                responsive: true
            });

        };

    </script>
</block>